<template>
  <div>
    <el-row>
      <span style="float: left">logo</span>
      <el-button style="float: right" size="mini" @click="update" type="danger">修改并保存</el-button>
      <el-col>
        <el-upload
            class="avatar-uploader"
            action="/api/oss/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-col>
      <el-col>
        <div style="text-align: left;margin-top: 20px;">
          <p>学校名称</p>
          <p>
            <el-input v-model="schoolName" style="width: 300px;padding-left:0px" size="mini"></el-input>
          </p>
        </div>
        <div style="text-align: left;margin-top: 20px;">
          <p>学校地址</p>
          <p>
            <el-input v-model="schoolAddress" style="width: 300px;padding-left:0px" size="mini"></el-input>
          </p>
        </div>
        <div style="text-align: left;margin-top: 20px;">
          <p>联系电话</p>
          <p>
            <el-input v-model="cellphone" style="width: 300px;padding-left:0px" size="mini"></el-input>
          </p>
        </div>
        <div style="text-align: left;margin-top: 20px;">
          <p>支付宝账号</p>
          <p>
            <el-input v-model="alipay" style="width: 300px;padding-left:0px" size="mini"></el-input>
          </p>
        </div>
        <div style="text-align: left;margin-top: 20px;">
          <p>微信收款账号</p>
          <p>
            <el-input v-model="weixin" style="width: 300px;padding-left:0px" size="mini"></el-input>
          </p>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-col :span="12">
        <span style="float: left">支付宝收款二维码</span>
        <el-upload
            class="avatar-uploader"
            action="/api/oss/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess1"
            :before-upload="beforeAvatarUpload1">
          <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-col>
      <el-col :span="12">
        <span style="float: left">微信收款二维码</span>
        <el-upload
            class="avatar-uploader"
            action="/api/oss/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess2"
            :before-upload="beforeAvatarUpload2">
          <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'schooledit',
  data() {
    return {
      school: this.$route.params.detildata,
      imageUrl: '',
      imageUrl1: '',
      imageUrl2: '',
      alipay: '',
      weixin: '',
      schoolName: '',
      schoolAddress: '',
      cellphone: '',
      logo: '',
      alipayPrc: '',
      weixinPrc: '',
    };
  },
  mounted() {
    this.schoolName = this.school.schoolName
    this.schoolAddress = this.school.schoolAddress
    this.cellphone = this.school.cellphone
    this.alipay = this.school.alipay
    this.weixin = this.school.weixin
    this.imageUrl = this.school.logo
    this.imageUrl1 = this.school.alipayPrc
    this.imageUrl2 = this.school.weixinPrc
  }
  ,
  methods: {
    handleAvatarSuccess(res, file) {
      console.log(res)
      this.logo = res
      this.imageUrl = URL.createObjectURL(file.raw);
    }, handleAvatarSuccess1(res, file) {
      console.log(res)
      this.alipayPrc = res
      this.imageUrl1 = URL.createObjectURL(file.raw);
    }, handleAvatarSuccess2(res, file) {
      console.log(res)
      this.weixinPrc = res
      this.imageUrl2 = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      return true;
    },
    beforeAvatarUpload1(file) {
      return true;
    },
    beforeAvatarUpload2(file) {
      return true;
    },
    update() {
      let data = {
        id:this.school.id,
        alipay: this.alipay,
        weixin: this.weixin,
        schoolName: this.schoolName,
        schoolAddress: this.schoolAddress,
        cellphone: this.cellphone,
        logo: this.logo,
        alipayPrc: this.alipayPrc,
        weixinPrc: this.weixinPrc
      }
      this.$axios.post("/schoolSet/updateSchool",data).then(res => {
                if (res.data.code==200){
                   this.$message.success("修改成功")
                }else {
                  this.$message.error("修改失败")
                }
          }
      )
    }
  }
}
</script>

<style>

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  float: left;
  margin-top: 30px;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

div {

}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}</style>